<template>
    <div class="_calculatormain">
        <div class="_resultbox">
            <div class="_line">{{calculatorString.length > 0 ? calculatorString.join('') : ''}}</div>
            <div class="_line">{{calculatorResoult}}</div>
        </div>
        <div class="_inputbuttons">
            <div class="_numbuttons">
                <div class="_num _buttonstyle" v-for="item,index in calc.numberButtons" :key="`_num${index}`" @click="calc.pushcalculatorString(item)"><span>{{item}}</span></div>
            </div>
            <div class="_calcbuttons">
                <div class="_calc _buttonstyle" v-for="item,index in calc.calcButtons" :key="`_calc${index}`" @click="calc.pushcalculatorString(item)"><span>{{item}}</span></div>
            </div>
        </div>
        <div class="_otherbuttons">
            <div class="_buttonstyle" :style="`width:${item.width};`" v-for="item,index in calc.otherButtons" :key="`_other${index}`" @click="item.clickevent"><span :style="`background-color:${item.backgroundColor??'#ffff'}`">{{item.label}}</span></div>
        </div>
    </div>
</template>

<script setup>
import { nextTick } from "vue";

const { proxy } = getCurrentInstance();

//计算公式
let calculatorString = ref([])
//计算结果
let calculatorResoult = ref('')
class calculator {


    //数字按钮
    numberButtons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0']
    //计算功能按钮
    calcButtons = ['+', '-', '*', '/']
    //特殊功能按钮
    otherButtons = [
        {
            label: 'C',//清屏按钮
            width: '25%',
            backgroundColor: '#FDAA31',
            clickevent: () => {
                calculatorString.value.length = 0
                calculatorResoult.value = ''
            }
        },
        {
            label: 'back',//回退按钮
            width: '25%',
            backgroundColor: '#FDAA31',
            clickevent: () => {
                calculatorString.value.pop()
                calculatorResoult.value = ''
            }
        },
        {
            label: '=',
            width: '50%',
            backgroundColor: '#3F53F0',
            clickevent: () => {
                if (calculatorString.value.length > 0)
                    calculatorResoult.value = parseFloat(eval(calculatorString.value.join('')).toFixed(15))
            }
        },
    ]

    constructor() {
        calculatorString.value.length = 0
        calculatorResoult.value = ''
    }
    //插入计算公式
    pushcalculatorString(text) {
        nextTick(() => {
            calculatorString.value.push(text)
        })

    }
}
let calc = new calculator()
</script>

<style lang="scss" scoped>
$padding: 10px;
@mixin flexmiddle {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin flexwrap {
    display: flex;
    flex-wrap: wrap;
}

._calculatormain {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 550px;
    background-color: #e4e9f1;
    border-radius: 20px;

    ._resultbox {
        width: calc(100% - calc($padding * 2));
        height: 100px;
        margin: 10px;
        background-color: #ffff;
        border-radius: 20px;
        ._line {
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            padding: $padding;
            font-size: 18px;
        }
    }

    ._buttonstyle {
        padding: $padding;
        box-sizing: border-box;
        height: 80px;
        span {
            cursor: pointer;
            width: 100%;
            height: 100%;
            background-color: #ffff;
            border-radius: 20px;
            @include flexmiddle;
        }
    }
    ._inputbuttons {
        width: 100%;
        height: auto;
        display: flex;
        ._numbuttons {
            width: 75%;
            height: auto;
            flex-direction: row;
            @include flexwrap;
            ._num {
                width: 33.3%;
            }
        }
        ._calcbuttons {
            width: 25%;
            height: auto;
            flex-direction: column;
            @include flexwrap;
            ._calc {
                width: 99.9%;
            }
        }
    }
    ._otherbuttons {
        width: 100%;
        height: auto;
        @include flexwrap;
    }
}
</style>
